<!doctype html>
<head>
    <title>Threebox tests</title>
    <script src="threebox-tests-bundle.js" type="text/javascript"></script>
    <script src="../examples/config.js"></script>
    <script src='../dist/threebox.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

    <script src='unit/material.test.js'></script>
    <script src='unit/utilities.test.js'></script>
    <script src='unit/object.test.js'></script>
    <script src='unit/validate.test.js'></script>

    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    Open the console to see test results
    <div id='map' style="width: 800px; height: 600px;"></div>

    <script>
        if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
        
        mapboxgl.accessToken = config.accessToken;
        var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v8',
          center: [-122.4131, 37.7743],
          zoom: 14,
          pitch: 60
        });

        map.on('style.load', function() {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function(map, gl){
                    onAdd(map, gl);
                },
                render: function(gl, matrix){
                    tb.update(true);
                }
            });
        });


        function onAdd(map, mbxContext) {

            tb = new Threebox(map, mbxContext);
            tb.setupDefaultLights();

            materialTest(tb);
            objectTest(tb);
            utilitiesTest(tb);
            validateTest(tb);

        }

        function vector3Equals(t, input, expected, allowableError, epsilon) {
            // Check that two Vector3s are equal to each other, allowing for a certain percentage of error due to floating point math
            if (allowableError === undefined) allowableError = 0.0000001;
            if (epsilon === undefined) epsilon = 0.00000000000001;
            var dX, dY, dZ;
            dX = Math.abs(input.x - expected.x) / (expected.x === 0 ? 1 : expected.x);
            dY = Math.abs(input.y - expected.y) / (expected.y === 0 ? 1 : expected.y);
            dZ = Math.abs(input.z - expected.z) / (expected.z === 0 ? 1 : expected.z);
            
            if (dX < epsilon) dX = 0;
            if (dY < epsilon) dY = 0;
            if (dZ < epsilon) dZ = 0;

            if(dX > allowableError || dY > allowableError || dZ > allowableError) {
                t.fail("Vector3 Equivalence failed: (" +  input.x + ", " + input.y + ", " + input.z + ") expected: (" +  expected.x + ", " + expected.y + ", " + expected.z + ")");
            }
            t.pass("ok Vector3 equivalence");
        }


        function precisionRound(number, precision) {
            var factor = Math.pow(10, precision);
            var tempNumber = number * factor;
            var roundedTempNumber = Math.round(tempNumber);
            return roundedTempNumber / factor;
        };
    </script>
</body>